/* 奖金分组维护--机构分组维护 */

<template>
  <div class="mod-config">
    <basic-container>
      <navigation :sign="{a:false,b:false,c:true,d:false,e:false}"></navigation>
      <div v-if="ymLoad" class="duiQitishi">
        <div class="tiShiTu">
          <img src="/images/qita/tishi.png" width="300">
        </div>
        <div class="tiShi">
          <div><b>您现在不是任何部门的奖金管理人员，无法进行机构分组维护的操作</b></div>
          <div class="font18 mt10">您可以通知系统管理员，为您设置具体的奖金管理部门！</div>
        </div>
      </div>
      <div v-else>
        <div class="anAnAn">
          <div class="flex justifyContentSpaceBetween">
            <div class="tabletext">机构分组维护</div>
          </div>
          <div style="margin-top:20px;width:100%">
          <span>
            <b>负责部门：</b>
            <el-select v-model="deptId" placeholder="请选择负责部门" class="xiaLa" style="width: 300px"
                       @change="switchDepartment">
              <el-option v-for="(item,index) in fzbmData" :key="index" :label="item.deptName"
                         :value="item.deptId"></el-option>
            </el-select>
          </span>
            <el-button type="primary" icon="el-icon-refresh" v-if="deptId != ''" plain @click="refresh"
                       style="float: right">刷新
            </el-button>
            <el-button type="primary" v-if="deptId != ''" plain @click="btnAllocationXxPz()"
                       style="float: right;margin-right: 10px">系数详细配置
            </el-button>
          </div>
        </div>
        <el-row>
          <el-col :span="8">
            <div class="user__main boxsty filter-container">
              <div class="mb10">
                <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
              </div>
              <div class="avue-crud" style="height:calc(100vh - 470px);">
                <el-tree :data="ryData" ref="tree" show-checkbox node-key="deptId" :props="defaultProps"
                         :check-strictly="true"  :default-expanded-keys="idArr"  @check="handleSelectionChange"
                         :filter-node-method="filterNode">

                <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
                  <div class="flex justifyContentSpaceBetween ml10" style="width: 100%">
                    <span>{{ node.label }}</span>
                  <span>
                    <el-button type="primary" plain size="mini" style="margin-right: 10px;"
                               @click="() => configCoefficient(data)">
                      配置系数
                    </el-button>
                  </span>
                  </div>
                </span> -->


                </el-tree>
              </div>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="box-card anDuiQi" style="height:50vh">
              <div class="mb10">
                <el-button type="primary" @click="leftMove()" class="fenZuAn"><i class="el-icon-arrow-left"
                                                                                 style="font-size:30px;"></i>
                </el-button>
              </div>
              <div>
                <el-button type="primary" @click="rightMove()" class="fenZuAn"><i class="el-icon-arrow-right"
                                                                                  style="font-size:30px;"></i>
                </el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="user__main boxsty filter-container">
              <div class="mb10">
                <span>机构分组</span>
                <!-- <el-button type="warning" v-if="deptId != ''" plain @click.stop="configCoefficientFz('all',deptId)"
                           class="ml10">配置系数
                </el-button> -->
                <el-button type="warning" v-if="deptId != ''" plain @click="add_grouping($event)" class="ml10">添加分组
                </el-button>
              </div>
              <div class="avue-crud" style="height:calc(100vh - 470px);">
                <el-collapse v-model="activeName" accordion v-for="(item,index)  in fzData"
                             @change="queryXh(item.id,index)" :key="index">
                  <el-collapse-item :name="index">
                    <template slot="title">
                      <div class="collapseBox">
                        <div class="flex justifyContentSpaceBetween">
                          <div>
                            <el-radio v-model="radio" :label="index" @click.stop.native="grouping(item.id,index)"
                                      style="margin-right:0px;">{{ '' }}
                            </el-radio>
                            <span>{{ item.jgFzName }}（系数:{{ item.fzXs.toFixed(2) }}）--{{ item.sl }} 个</span>
                          </div>
                          <div style="margin-right:3px;">
                            <!-- <el-button type="primary" plain @click.stop="configCoefficientFz('group',item.id)">配置系数
                            </el-button> -->
                            <el-button type="primary" plain @click="add_grouping($event,item.id)">修改分组</el-button>
                            <el-button type="danger" plain @click="deleteHandle($event,item.id)">删除分组</el-button>
                          </div>
                        </div>
                      </div>
                    </template>
                    <div class="noBorder">
                      <el-table :data="item.tableData" @selection-change="handleSelectionChangezdyfz"
                                class="avue-crud" border v-loading="dataListLoading">
                        <el-table-column type="selection" header-align="center" align="center" width="55"></el-table-column>
                        <el-table-column prop="jgDeptCode" header-align="center" align="center" width="95px" label="机构编码"></el-table-column>
                        <el-table-column prop="jgDeptName" header-align="center" align="center" show-overflow-tooltip label="机构名称"></el-table-column>
                        <el-table-column prop="config01" header-align="center" align="center" label="部门系数" width="90px"></el-table-column>
                        <el-table-column header-align="center" align="center" label="操作" width="110">
                          <template slot-scope="scope">
                            <el-button @click="configCoefficientV(scope.row)" type="primary" plain size="mini">配置系数</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 添加分组 -->
      <tableForm ref="tableForm" @refreshDataList="refresh"></tableForm>
      <!-- 系数配置 -->
      <jiangjinjggxxspzForm ref="jiangjinjggxxspzForm" @refresh="refreshby"></jiangjinjggxxspzForm>
      <!-- 系数配置_分组_全部 -->
      <xxPz ref="xxPz" @refresh="refresh"></xxPz>
      <!--  系数详细配置  -->
      <xiangxiPz ref="xiangxiPz" @refresh="refresh"></xiangxiPz>

      <fzPz ref="fzPz" @refresh="refresh"></fzPz>
    </basic-container>
  </div>
</template>

<script>
/*!
 * 绩效考核-人员分组维护主页面
 *
 * @author zmk
 * @date 2021-08-03 10:11:35
 */
import {
  getJgfzList,
  getDeptList,
  delObj
} from '@/api/jiangjin/jiangjinjjjgfz'
import {
  getFzList,
  insertJgmxbList,
  updateJgmxbList,
  getJjListByDeptId
} from '@/api/jiangjin/jiangjinjjjgwh'
import tableForm from './jiangjinjjjgfz-form'
import jiangjinjggxxspzForm from './jiangjinjggxxspz-form'
import xxPz from "./xxPz";
import xiangxiPz from "./xiangxiPz";
import fzPz from "./fzPz";

import {
  getJiangJinBm
} from '@/api/admin/dept'
import {
  mapGetters
} from 'vuex'
import { Alert } from 'element-ui'

export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dataListLoading: false,
      fzbmData: [],
      filterText: '',
      fzData: [], //分组list
      ryData: [], //人员list
      deptId: '', //负责部门ID
      deptName: '', //负责部门名称
      radio: 0,
      multipleSelection: [],
      multipleSelectionfz: [],
      activeName: '', //手风琴name控制
      ymLoad:false,
      idArr:[]
    }
  },
  components: {
    tableForm,
    jiangjinjggxxspzForm,
    xxPz,
    xiangxiPz,
    fzPz

  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
  },
  mounted() {
    this.getJiangJinJg()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    // el-tree节点过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //左移动-将分组中的机构移除
    leftMove() {
      if (this.multipleSelectionfz.length == 0) {
        this.$notify.closeAll();
        this.$notify.error("没有可移动项机构")
        return;
      }
      // 删除分组中选中的机构
      updateJgmxbList(this.multipleSelectionfz).then(data => {
        if (data.data.code == 0) {
          this.$notify.closeAll();
          this.$notify.success('操作成功')
          this.multipleSelectionfz = [];
          this.refreshby();
        } else {
          this.$notify.closeAll();
          this.$notify.error("操作失败")
        }
      }).catch(() => {
        this.$notify.closeAll();
        this.$notify.error("操作失败")
      });
    },
    //右移动
    rightMove() {
      if (this.multipleSelection.length == 0) {
        this.$notify.closeAll();
        this.$notify.error("没有可移动人员")
        return;
      }

      if (this.fzData.length > 0) {
        this.ryxxCheck();
      } else {
        this.$notify.closeAll();
        this.$notify.error("请先选择自定义分组后再进行操作")
      }
    },
    //人员信息重复校验
    ryxxCheck() {
      getJjListByDeptId(this.fzData[this.radio].id).then(response => {
        var ryNames = "";
        var data = response.data.data;

        for (var a in data) {
          for (var b in this.multipleSelection) {
            if (data[a].jgDeptCode == this.multipleSelection[b].jgDeptCode) {
              ryNames += data[a].jgDeptName + "、";
            }
          }
        }
        if (ryNames == "") {
          insertJgmxbList(this.multipleSelection, this.fzData[this.radio].id).then(data => {
            if (data.data.code == 0) {
              this.$notify.closeAll();
              this.$notify.success('操作成功')
              this.multipleSelection = [];
              this.refreshby();
            } else {
              this.$notify.closeAll();
              this.$notify.error("操作失败")
            }
          }).catch(() => {
            this.$notify.closeAll();
            this.$notify.error("操作失败")
          });
        } else {
          this.$confirm(ryNames.substr(0, ryNames.length - 1) + '已存在，无法移动。', '提示', {
            showConfirmButton: false,
            cancelButtonText: '确定',
            type: 'warning'
          }).then(function () {
          }).catch(function (err) {
          });
        }
      })
    },
    handleSelectionChange(checkedNodes, checkedKeys) {
      var data = [];
      for (var a in checkedKeys.checkedNodes) {
        // if (checkedKeys.checkedNodes[a].id != undefined) {
        data.push({
          zjDeptId: this.deptId,
          zjDeptName: this.deptName,
          jgDeptId: checkedKeys.checkedNodes[a].deptId,
          jgDeptName: checkedKeys.checkedNodes[a].deptName,
          jgDeptCode: checkedKeys.checkedNodes[a].deptCode,
          deptId: this.deptId
        });
        // }
      }
      this.multipleSelection = data;
    },
    handleSelectionChangezdyfz(val) {
      this.multipleSelectionfz = val;
    },
    //获取奖金管理人机构
    getJiangJinJg() {
      getJiangJinBm().then(res => {
        if (res.data.data != null && res.data.data.length > 0) {
          this.deptId = res.data.data[0].deptId;
          this.deptName = res.data.data[0].deptName;
          this.fzbmData = res.data.data;
          this.ymLoad = false;
          this.refresh('csh');
        } else {
          this.$notify.closeAll();
          this.ymLoad = true;
          //this.$notify.error("没有相关负责部门")
          //this.deptName = "无相关负责部门";
        }
      }).catch(err =>{
        this.ymLoad = true;
      });
    },
    //管理部门切换
    switchDepartment(deptId) {
      for (var a in this.fzbmData) {
        if (this.fzbmData[a].deptId == deptId) {
          this.deptId = this.fzbmData[a].deptId;
          this.deptName = this.fzbmData[a].deptName;
          this.refresh();

          break;
        }
      }
    },
    //增加分组
    add_grouping(e, id) {
      e.stopPropagation();
      this.$nextTick(() => {
        this.$refs.tableForm.init(this.deptId, this.deptName, id);
      });
    },
    //父级操作后页面刷新
    refreshby() {
      this.activeName = this.radio
      this.fzData = [];
      this.ryData = [];
      this.filterText = "";

      getJgfzList(this.deptId).then(res => {
        this.fzData = res.data.data;
        //this.grouping(this.fzData[this.radio].id)
        this.queryXh(this.fzData[this.radio].id, this.radio);
        this.getRyfzmxbList();
      });
    },
    //子级操作后页面刷新
    refresh(type) {
      this.radio = 0;
      this.activeName = '';
      this.fzData = [];
      this.ryData = [];
      this.filterText = "";

      getJgfzList(this.deptId).then(res => {
        if(res.data.data!=''){
          this.fzData = res.data.data;
          if(type=='csh'){
            this.grouping(this.fzData[this.radio].id)
          }
        }
        
        this.getRyfzmxbList();
      });
    },
    //获取页面数据附加方法
    getRyfzmxbList() {

      getDeptList().then(resbm => {
        this.ryData = this.getTree(resbm.data.data, this.deptId, 1);
        this.idArr=[]
          this.ryData.forEach(m=>{
               this.idArr.push(m.deptId)
        })
      });
    },
    //数据tree结构化
    getTree(bmlist, id, bz) {
      return bmlist.filter(v => {
        if (bz) {
          if (v.deptId === id) {
            return v
          }
        } else {
          if (v.parentId === id) {
            return v
          }
        }
      }).map(v => {
        const children = this.getTree(bmlist, v.deptId, 0);
        if (children.length) {
          v.children = children;
          // v.disabled = true;
        }
        return v
      });
    },
    //行点击事件
    queryXh(id, index) {
      this.radio = index;
      this.dataListLoading = true
      this.fzId=id
      getFzList(id).then(response => {
        this.$set(this.fzData[index], 'tableData', response.data.data);
        this.dataListLoading = false
      })
    },
    //去除行联动
    grouping(id, name) {
      this.fzId=id
      console.log("this.fzId:"+this.fzId)
    },
    // 删除
    deleteHandle(e, id) {
      e.stopPropagation();

      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$notify.closeAll();
        this.$notify.success('删除成功')
        this.refresh()
      }).catch(function (err) {
      });
    },
    //配置系数_单机构
    configCoefficientV(data) {
      var r = {};
      r.deptId = data.jgDeptId
      r.deptCode = data.jgDeptCode
      r.deptName = data.jgDeptName
      this.configCoefficient(r)
    },
    configCoefficient(data) {
      this.$nextTick(() => {
        this.$refs.jiangjinjggxxspzForm.init(data)
      });
    },
    //配置系数_分组_全部
    configCoefficientFz(bz, id) {
      if (bz == "all") {
        if(this.fzData.length==0){
          this.configCoefficientFzs(bz, id,"");
        }else{
          getFzList(this.fzData[0].id).then(response => {
            if(response.data.data.length>0){
              this.configCoefficientFzs(bz, id,response.data.data[0].jgDeptCode);
            }else{
              this.configCoefficientFzs(bz, id,"");
            }
          })
        }
      } else {
        getFzList(id).then(response => {
          if(response.data.data.length>0){
            this.configCoefficientFzs(bz, id,response.data.data[0].jgDeptCode);
          }else{
            this.configCoefficientFzs(bz, id,"");
          }
        })
      }
    },
    configCoefficientFzs(bz, id, info) {
      this.$nextTick(() => {
        this.$refs.xxPz.init(bz, id, info)
      });
    },
    //系数详细配置
    btnAllocationXxPz(deptId) {
      this.allocationVisibleXxPz = true;
      console.log(this.fzId)
      this.$nextTick(() => {
        this.$refs.fzPz.init(this.fzId)
      })
    },
  }
}

</script>
<style lang="scss" scoped>
.el-tree .el-tree-node__content {
  width: 100%;
  height: 45px !important;
  line-height: 35px;
}

.custom-tree-node {
  width: 100%;
}

.el-tree {
  width: 96%;
}
</style>
